<template>
  <div class="bottom-view">
    <div class="ul">
      <div class="li" @click="openMap">网站地图</div>
      <div class="li" @click="openUrl">友情链接</div>
      <div class="li" @click="openLaw">法律声明</div>
      <div class="li" @click="goContactUs">联系我们</div>
    </div>
    <div class="info">
      <p>地址：{{ commonSysObj[3].value }}</p>
      <p>电话：{{ commonSysObj[1].value }}</p>
      <p>邮箱：{{ commonSysObj[2].value }}</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['commonSysObj'])
  },
  methods: {
    goContactUs() {
      this.$router.goto({
        path: '/contactUs'
      })
    },
    openMap() {
      window.open(
        'https://www.amap.com/search?query=%E9%9D%92%E6%B5%B7%E5%BB%BA%E7%AD%91%E8%81%8C%E4%B8%9A%E6%8A%80%E6%9C%AF%E5%AD%A6%E9%99%A2&city=330300&geoobj=120.716547%7C27.975971%7C120.731911%7C27.983399&zoom=17'
      )
    },
    openUrl() {
      if (this.commonSysObj[5].value) window.open(this.commonSysObj[5].value)
    },
    openLaw() {
      if (this.commonSysObj[6].value) {
        this.$router.goto({
          path: '/articleDetail',
          query: {
            id: this.commonSysObj[6].value
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bottom-view {
  background: #362d22;
  width: 100%;
  height: 333px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding-top: 96px;
  .ul {
    margin-bottom: 43px;
    .li {
      width: 125px;
      border-right: 2px solid #fff;
      display: inline-block;
      line-height: 18px;
      cursor: pointer;
      &:last-child {
        border-right: 0;
      }
    }
  }
  .info {
    line-height: 18px;
    p {
      margin-bottom: 40px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
